<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
</head>
<body>

<!--
请将下面字符串渲染到准备好的 p标签内部，结构必须如左下图所示，展示效果如右图所示：
const gift = '50g茶叶,清洗球'

【赠品】 50g的茶叶
【赠品】 清洗球

思路：
①：把字符串拆分为数组，这样两个赠品就拆分开了 用那个方法？ split(‘,’)
②：利用map遍历数组，同时把数组元素生成到span里面，并且返回
③：因为返回的是数组，所以需要 转换为字符串, 用那个方法？ join(‘’)
④：p的innerHTML 存放刚才的返回值
-->

<p></p>


<script>
    // 数据
    const 赠品 = '50g的茶叶,清洗球'

    // 1. 把字符串拆分为数组
    console.log(赠品.split(',')) // 分隔符是 , 号
    // 2. 根据数组元素的个数，生成 对应 span标签
    const 字符串 = 赠品.split(',').map(function (元素) {
        return `<span>【赠品】 ${元素}</span> <br>`
    }).join('')
    // 链式编程, map遍历数组  join拼接数组
    console.log(字符串)

    // 以上链式编程,不清晰我们拆开来
    // 字符串 --> 数组 --> 新数组 -- 字符串
    const p标签 = document.querySelector('p') // 获取DOM元素
    const 数组 = 赠品.split(',') // 字符串,拆分成数组, 以 , 作为分隔符
    const 新数组 = 数组.map(元素 => `<span>【赠品】 ${元素}</span> <br>`) // 遍历数组元素, 返回一个新的数组
    const 拼接的字符串 = 新数组.join('') // 把数组拼接成为字符串, 这里设置没有分隔符

    p标签.innerHTML = 拼接的字符串 // 修改p标签里的内容


</script>
</body>
</html>